<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h5>v-on绑定事件时的取值</h5>
        <h5>vue 提供快速开发的简写关键字 @ 替换 v-on</h5>
        <p>取值：Function | Inline Statement | Array | Object</p>
        <hr>
        <p>取值：Function</p>
        <input type="button" value="click事件" v-on:click="printMsg()">
        <input type="button" value="click事件" @click="printMsg()">
        <br>
        <!-- vue在事件绑定解析，通过判断定义的方法方式，选择是否通过call函数进行方法调用 -->
        <!-- 无()的方法定义方法，是为vue的组件开发时的数据传值提供技术支持=组件化中详细讲解 -->
        <input type="button" value="click事件" v-on:click="printMsg">
        <input type="button" value="click事件" @click="printMsg">
        <hr>
        <p>取值：Inline Statement - 行内表达式</p>
        <!-- 页面事件功能构建时，方法代码只完成仓库数据更新的方法 ，进行代码简化-->
        <p>flag:{{ flag }}</p>
        <input type="checkbox" v-on:change=" changeFlag( $event.target.checked ) ">
        <input type="checkbox" @change=" changeFlag( $event.target.checked ) ">
        <br>
        <input type="checkbox" v-on:change=" flag = $event.target.checked ">
        <input type="checkbox" @change=" flag = $event.target.checked ">
        <hr>
        <p>取值：Array</p>
        <!-- 在vue事件绑定过程，为一个标签的同一个事件完成多个回调的绑定 -->
        <input type="button" value="click" v-on:click="printMsg()" v-on:click="printInfo()">
        <input type="button" value="click" @click="printMsg()" @click="printInfo()">

        <br>
        <!-- 数组取值时，内部的元素一定是一个方法 = 多回调的执行顺序就是数组定义时的内容顺序 -->
        <input type="button" value="click" v-on:click="[ printInfo,printMsg ]">
        <input type="button" value="click"@click="[ printInfo,printMsg ]">
        <br>
        <!-- 数组取值方式vue提供替代方法，该方法只用在事件方法定义时用 , 进行方法分割 = ,分割的方法回调必须定义() -->
        <input type="button" value="click" v-on:click="printInfo(),printMsg()">
        <input type="button" value="click" @click="printInfo(),printMsg()">
        <br>
        <input type="button" value="click" v-on:click="printTest()">
        <input type="button" value="click" @click="printTest()">
        <hr>
        <p>取值：Object</p>
        <!-- 
            通过一个v-on指令为一个标签元素，完成多种事件的绑定 
                = 多事件的同时绑定v-on不能定义: 
                = key 事件名    value 回调函数
                = 回调不能增加 ()
        -->
        <!-- 对象的取值模式，在组件化开发时，组件间事件传递会进行使用=组件化中详细讲解 -->
        <input type="text" v-on=" { blur:blurCallback,focus:focusCallback } " >
        <input type="text" @=" { blur:blurCallback,focus:focusCallback } " >
        <br>
        <input type="text" v-on:blur="blurCallback()" v-on:focus="focusCallback()" >
        <input type="text" @blur="blurCallback()" @focus="focusCallback()" >


    </div>
    <script type="module"> 
        // function show(){}
        // var arr = [
        //     show,
        //     show()
        // ]
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    flag:false
                }
            },
            methods:{
                printMsg(){
                    console.log("点击事件被执行-printMsg")
                },
                printInfo(){
                    console.log("点击事件被执行-printInfo")
                },
                printTest(){
                    this.printInfo();
                    console.log("点击事件被执行-printTest")
                },
                blurCallback(){
                    console.log("blurCallback")
                },
                focusCallback(){
                    console.log("focusCallback")
                },
                changeFlag(flag){
                    this.flag = flag;
                }
            }
        }).mount("#app")
    </script>
</body>
</html>